<template >
    <div class="divbody flex justify-end ">
        <div class="rounded-lg  flex justify-center mr-60" style="height:250px;width:350px;background-color: #374151;opacity: 0.9">
            <el-form  :inline="false" size="normal" :model="form" >
            
                <h1 class=" text-light-100 m-4 " style="text-align:center">魔力内部认证平台</h1>
                <el-form-item >
                    
                    <el-input placeholder="用户名" style="width:300px;height: 40px;">
                        <template #prefix><el-icon ><UserFilled /></el-icon></template>
                    </el-input>
                </el-form-item>
                <el-form-item >
                    <el-input placeholder="密码" style="width:300px;height: 40px;">
                        <template #prefix><el-icon><GoodsFilled /></el-icon></template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="rounded-4xl" type="primary" style="width:300px;height: 40px;">
                        <router-link :to="'/goods/detail/' + 123">进入详情页</router-link>
                    </el-button>
            
                </el-form-item>
            </el-form>
            
        </div>
        
    </div>
 
</template>
<script setup >
import {ref, reactive,onMounted,onBeforeUnmount } from 'vue'
const form = reactive({
    name: '',
    password: '',
    
})

</script>

<style scoped>
.divbody{
    width: 100%;
    height: 100vh;
    background-image:url('@/assets/bg.jpeg');
    background-size: cover;
    background-size: 100% 100%;
    position: fixed;

}

:deep(.el-input__wrapper){
    border: 0!important; 
    background-color: rgb(91, 91, 106)!important;
    border: 1px solid #2d3a4b!important;
    box-shadow:0 0 0 0!important;
    
}
</style>